<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="flex items-center justify-between">
        <div class="pictureTitle">
          任务截图
          <span class="text-sm text-[#999999]">{{ tips }}</span>
        </div>
        <div class="header-handle" v-if="handleType != 'view'">
          <el-button @click="handleOpen(nativeRef)">本地上传</el-button>
        </div>
      </div>
    </template>
    <el-scrollbar style="min-height: 80px">
      <div class="PictureList flex flex-wrap px-2 py-4">
        <template v-for="(item, index) in PictureList" :key="index">
          <div class="PictureItme mx-2 mb-3" style="width: 85px">
            <div class="mb-2 relative">
              <svg-icon
                icon-class="state_fail_cover"
                class="absolute -right-1.5 -top-1.5 text-white z-10"
                @click="handleDel(item, index)"
                v-if="handleType != 'view'"
              />
              <VImage
                :src="item.url"
                :width="85"
                :height="85"
                :previewlist="photoSort(item, PictureList)"
              >
              </VImage>
            </div>
            <div class="line1">{{ item.name }}</div>
            <div v-if="handleType != 'view'">
              <el-button
                type="primary"
                link
                @click="checkedTag(index, item.images_img_tag)"
                >编辑标签</el-button
              >
            </div>
          </div>
        </template>
      </div>
    </el-scrollbar>
  </el-card>
  <NativeUpload ref="nativeRef" @uploadFile="uploadFile"></NativeUpload>
  <batchImagesTag ref="batchImagesTagRef" @checked="checkedList"></batchImagesTag>
</template>

<script setup name="Module">
import { ElMessage } from "element-plus";
import { nextTick, onMounted, reactive } from "vue";
import NativeUpload from "./NativeUpload.vue";
import { photoSort } from "@/utils/index";
import VImage from "@/components/Image/index.vue";
import batchImagesTag from "@/components/batchImagesTag/index";

let handleType = reactive(inject("handleType"));
const emit = defineEmits(["update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Array,
    default: () => {
      return [];
    },
  },
  customTag: {
    type: String,
    default: () => "",
  },
  type: {
    type: String,
    default: () => "",
  },
  tips: {
    type: String,
    default: () => "",
  },
});

const PictureList = computed({
  get: () => {
    return props.modelValue || [];
  },
  set: (val) => {
    console.log(val);
    emit("update:modelValue", val);
  },
});

const data = reactive({
  firstIndex: "",
});

const { firstIndex } = toRefs(data);

const nativeRef = ref(null);
// 打开弹窗
const handleOpen = (ref) => {
  nextTick(() => {
    ref.open();
  });
};

const uploadFile = (fileList) => {
  nextTick(() => {
    fileList.forEach((item) => {
      const images_img_tag = item.images_img_tag_list;
      item.images_img_tag = images_img_tag;
      delete item.images_img_tag_list;
    });
    PictureList.value.push(...fileList);
  });
};

const handleDel = (item, index) => {
  PictureList.value.splice(index, 1);
};

const batchImagesTagRef = ref();
const checkedTag = (first, list) => {
  firstIndex.value = first;
  batchImagesTagRef.value.open("edit", list);
};

const checkedList = (list) => {
  PictureList.value[firstIndex.value].images_img_tag = list;
};
</script>

<style lang="scss" scoped>
.box-card {
  border-color: var(--base-border-color);
}
</style>
